<template>
  <div>
    <van-field class="inputClass" :label="labelName" :required="required" placeholder-style="color:#999;" readonly :value="info" is-link input-align="right" placeholder="请选择" clickable @click-input="clickInput" />
    <van-popup class="dropClass" :show="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>
<script>
export default {
  components: { },
  props: {
    columns: {
      type: [Array],
    },
    labelName: {
      type: String,
    },
    required: {
      type: Boolean,
    },
    value: {
      type: [String, null],
    },
  },
  data() {
    return {
      info: this.value ? this.value : '',
      showPicker: false,
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        this.info = newVal
      },
    },
  },
  methods: {
    clickInput() {
      this.showPicker = true
    },
    // 确定
    onConfirm(val) {
      this.info = val.detail.value
      const newObj = {}
      newObj.name = this.labelName
      newObj.value = val.detail.value
      this.$emit('changeValue', newObj)
      this.showPicker = false
    },
    // 取消
    onCancel() {
      this.showPicker = false
    },
    cleanInput() {
      this.info = ''
    },
  },
}
</script>
  <style lang="scss">
  .inputClass{
    view {
      label{
        width:100%;
        display: flex;
      }
      input{
        color:#999;
      }
    }
  }
  </style>
